﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../../../lib/json2.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
    <script src="../EmployeeData.js" type="text/javascript"></script>
    <script src="../DepartmentData.js" type="text/javascript"></script>


    <script type="text/javascript">

        var DepartmentList = DepartmentData.Rows;
        var sexData = [{ Sex: 1, text: '男' }, { Sex: 2, text: '女'}];
        $(f_initGrid);
        var g = null;
        function f_initGrid()
        {
            g = $("#maingrid").ligerGrid({
                columns: [
                { display: '主键', name: 'ID', width: 50, type: 'int' },
                {
                    display: '名字', name: 'RealName',
                    editor: { type: 'text' }
                },
                {
                    display: '性别', width: 50, name: 'Sex',
                    editor: { type: 'select', data: sexData, valueField: 'Sex' },
                    render: function (item)
                    {
                        if (parseInt(item.Sex) == 1) return '男';
                        return '女';
                    }
                },
                { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int' } },
                {
                    display: '部门', name: 'DepartmentID', width: 120, isSort: false,
                    editor: {
                        type: 'select',
                        onBeforeOpen: f_selectDepartment,
                        render: function (value)
                        {
                            for (var i = 0; i < DepartmentList.length; i++)
                            {
                                if (DepartmentList[i]['DepartmentID'] == value)
                                    return DepartmentList[i]['DepartmentName'];
                            }
                        }
                    }, render: function (item)
                    {
                        for (var i = 0; i < DepartmentList.length; i++)
                        {
                            if (DepartmentList[i]['DepartmentID'] == item.DepartmentID)
                                return DepartmentList[i]['DepartmentName']
                        }
                        return item.DepartmentName;
                    }
                },
                {
                    display: '地址', name: 'Address',
                    editor: { type: 'text' }, align: 'left', width: 300
                }
                ],
                data: EmployeeData,
                enabledEdit: true,
                width: '100%', height: 400
            });
        }
        function f_selectDepartment() { 
            $.ligerDialog.open({ title: '选择部门', width: 700, height: 300, url: 'selectDepartment.htm', buttons: [
                { text: '确定', onclick: f_selectDepartmentOK },
                { text: '取消', onclick: f_selectDepartmentCancel }
            ]
            });
            return false;
        }
        function f_selectDepartmentOK(item, dialog)
        {
            var data = dialog.frame.f_select();
            if (!data)
            {
                alert('请选择行!');
                return;
            }
            g.updateCell('DepartmentID', data.DepartmentID, g.getSelected());
            g.endEdit();
            dialog.close();
        }
        function f_selectDepartmentCancel(item, dialog)
        {
            dialog.close();
        }
        
        function deleteRow()
        {
            var manager = $("#maingrid").ligerGetGridManager();
            manager.deleteSelectedRow();
        } 

        function getSelected()
        {
            var manager = $("#maingrid").ligerGetGridManager();
            var row = manager.getSelectedRow();
            if (!row) { alert('请选择行'); return; }
            alert(JSON.stringify(row));
        }
        function getData()
        {
            var manager = $("#maingrid").ligerGetGridManager();
            var data = manager.getData();
            alert(JSON.stringify(data));
        } 
    </script>
</head>
<body  style="padding:10px"> 

 <div class="l-clear"></div>
    <div id="maingrid" style="margin-top:20px"></div> <br />
       <br />
   <a class="l-button" style="width:120px" onclick="getSelected()">获取选中的值(选择行)</a>
   <br />
   <a class="l-button" style="width:120px" onclick="getData()">获取当前的值</a>
  <div style="display:none;"> 
</div>
</body>
</html>
